<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-28 10:03:20
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-04-23 16:26:30
 * @FilePath: \vprisk10.14\src\views\Main.vue
 * @Description: 
-->
<template>
  <el-container style="height: 100%">
    <el-aside width="200" style="overflow:hidden"><common-aside /></el-aside>
    <el-container class="container">
      <el-header><common-header /></el-header>
      <common-tab />
      <el-main>
        <!-- 设置了缓存的组件将会在keep-alive内显示 -->
        <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader";
import CommonAside from "../components/CommonAside";
import CommonTab from "../components/CommonTab";
export default {
  components: {
    CommonHeader,
    CommonAside,
    CommonTab
  },
  mounted() {
    document.body.className = "theme-" + 1;
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #f1f1f2;
  padding: 0;
  height: 63px;
  overflow: hidden;
}
.el-main {
  padding: 10px;
  border: 10px solid rgb(241, 241, 242);
  border-top: none;
  background-color: #fff;
  height: 100%;
}
.el-aside {
  background: linear-gradient(336deg, #485b7c 0%, #232e46 100%, #232e46 100%);
}
</style>
